<template>
	<view class="search-container">
		<!-- 搜索框 -->
		<view class="search-box">
			<input type="text" v-model="searchKey" placeholder="搜索鲜花、花篮..." @input="handleSearch"
				class="search-input" />
			<!-- 清除按钮 -->
			<button v-if="searchKey" @click="clearSearch" class="clear-btn">
				<text class="iconfont icon-close"></text>
			</button>
		</view>

		<!-- 筛选结果列表 -->
		<view class="goods-list">
			<!-- 无结果提示 -->
			<view v-if="filteredGoods.length === 0 && searchKey" class="empty-tip">
				未找到 "{{ searchKey }}" 相关商品
			</view>

			<!-- 商品列表 -->
			<view v-for="(item, index) in filteredGoods" :key="index" class="goods-item">
				<image :src="item.image" mode="widthFix" class="goods-img"></image>
				<view class="goods-info">
					<view class="goods-name">{{ item.name }}</view>
					<view class="goods-price">{{ item.price }}</view>
					<view class="goods-sold">已售 {{ item.sold }}</view>
					<view class="goods-intro">{{ item.intro }}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		// 接收父组件传递的分类商品数据
		props: {
			// 接收分类数据（格式为 {0: [], 1: [], 2: []...}）
			categoryGoods: {
				type: Object,
				default: () => ({}) // 默认空对象
			}
		},
		data() {
			return {
				searchKey: '',
				filteredGoods: []
			};
		},
		computed: {
			// 合并所有分类的商品为一维数组
			allGoods() {
				let goodsArr = [];
				// 遍历分类数据的所有键值对，合并商品数组
				Object.keys(this.categoryGoods).forEach(key => {
					goodsArr = goodsArr.concat(this.categoryGoods[key] || []);
				});
				return goodsArr;
			}
		},
		watch: {
			// 监听分类数据变化，重新初始化筛选结果
			categoryGoods: {
				deep: true,
				handler() {
					this.filteredGoods = this.allGoods;
				}
			}
		},
		onLoad() {
			// 初始化时显示所有商品
			this.filteredGoods = this.allGoods;
		},
		methods: {
			// 处理搜索输入
			handleSearch() {
				const key = this.searchKey.trim().toLowerCase();
				if (!key) {
					// 关键词为空时显示所有商品
					this.filteredGoods = this.allGoods;
					return;
				}

				// 筛选逻辑：匹配商品名称、简介
				this.filteredGoods = this.allGoods.filter(item => {
					const nameMatch = item.name.toLowerCase().includes(key);
					const introMatch = item.intro ? item.intro.toLowerCase().includes(key) : false;
					return nameMatch || introMatch;
				});
			},
			// 清除搜索
			clearSearch() {
				this.searchKey = '';
				this.filteredGoods = this.allGoods;
			}
		}
	};
</script>

<style scoped>
	/* 样式保持不变 */
	.search-container {
		padding: 16rpx;
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.search-box {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 32rpx;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.search-input {
		flex: 1;
		height: 64rpx;
		font-size: 28rpx;
		padding: 8rpx 0;
	}

	.clear-btn {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		padding: 0;
		background: transparent;
		color: #999;
	}

	.goods-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}

	.goods-item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 16rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.05);
	}

	.goods-img {
		width: 100%;
		height: 240rpx;
		border-radius: 12rpx;
	}

	.goods-info {
		padding-top: 12rpx;
	}

	.goods-name {
		font-size: 28rpx;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.goods-price {
		color: #ff4d4f;
		font-size: 26rpx;
		margin-top: 8rpx;
	}

	.goods-sold {
		color: #999;
		font-size: 22rpx;
		margin-top: 4rpx;
	}

	.goods-intro {
		font-size: 24rpx;
		color: #666;
		margin-top: 8rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.empty-tip {
		grid-column: 1 / 3;
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}
</style>